<template>
  <view class="container">
    <view class="tabs-box">
      <view class="tabs1 flex">
        <view v-for="(item,index) in tabs1" :class="{active:activeTab1==index}" @click="tabs1Click(item,index)"
          :key="index">{{item}}</view>
      </view>
      <view class="tabs2 flex">
        <view v-for="(item,index) in tabs2" :class="{active:activeTab2==index}" @click="tabs2Click(item,index)"
          :key="index">{{item}}</view>
      </view>
    </view>
    <view class="box" v-for="item in 10">
      <view class="top flex">
        <view class="avatar"></view>
        <view class="info">
          <view class="name">拼夕夕</view>
          <view class="time">12分钟前发布</view>
        </view>
        <view class="share flex">
          <image src="/static/common/share-icon.png" mode=""></image>
          分享
        </view>
      </view>
      <view class="content">
        <view class="text">【拼多多-千万补贴】</view>
        <view class="text">[庆祝][庆祝]好消息~每日推广打卡赠额度任务难度下调啦！</view>
        <view class="text">打卡方式：在千万补贴活动页面内生成任意商品链接，并推广产生【1笔】以上的真实订单即可打卡成功（从原来的3单降到1单了！）</view>
        <view class="text">额度奖励：打卡成功后的当天，系统按照阶梯规则增加您的本场补贴额度，额度立即可用！</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const tabs1 = ref(['爆款', '快报', '省钱攻略', '宣传素材', '爆款', '爆款', '爆款', '爆款'])
  const tabs2 = ref(['爆款', '淘宝', '京东', '拼多多', '唯品会'])
  const activeTab1 = ref(0)
  const activeTab2 = ref(0)
  const tabs1Click = (item, index) => {
    activeTab1.value = index
  }
  const tabs2Click = (item, index) => {
    activeTab2.value = index
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .container {
    background-color: #f9f9f9;
    min-height: 100vh;

    .tabs-box {
      position: sticky;
      top: 0;
      left: 0;
      padding-top: $uni-pageTop;
      padding-bottom: 12px;

      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }

      .tabs1 {
        font-size: 18px;
        font-weight: 400;
        color: #333;
        justify-content: space-between;
        overflow-x: auto;
        padding: 0 12px;
        padding-bottom: 20px;

        >view {
          margin-right: 22px;
          flex-shrink: 0;
          width: 4em;
          text-align: center;

          &:last-child {
            margin-right: 0;
          }

          &.active {
            color: #FF3D3B;
            font-weight: 600;
            position: relative;

            &::after {
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 8px;
              height: 4px;
              background-color: #FF3D3B;
              border-radius: 2px;
            }
          }
        }
      }

      .tabs2 {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        padding-left: 12px;

        >view {
          border-radius: 15px;
          background-color: #fff;
          width: 76px;
          text-align: center;
          height: 26px;
          line-height: 26px;
          margin-right: 12px;

          &.active {
            background-color: #FF3D3B;
            color: #fff;
          }
        }

      }
    }

    .box {
      margin: 0 12px 12px;
      background-color: #fff;
      border-radius: 12px;
      padding: 12px;

      .top {
        position: relative;

        .share {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 62px;
          height: 26px;
          background-color: #FF3D3B;
          border-radius: 15px;
          font-size: 12px;
          font-weight: 400;
          color: #fff;
          padding-left: 6px;

          image {
            width: 18px;
            height: 18px;
            margin-right: 4px;
          }
        }

        .avatar {
          background-color: #FF3D3B;
          width: 42px;
          height: 42px;
          border-radius: 12px;
          margin-right: 12px;
        }

        .info {
          .name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }

          .time {
            font-size: 12px;
            font-weight: 400;
            color: #999;
          }
        }
      }

      .content {
        margin-top: 12px;

        .text {
          font-size: 14px;
          font-weight: 400;
          color: #333;
          line-height: 20px;
        }

      }
    }
  }
</style>